<template>
    <div class="bookPage" @click="clickPage" ref="bookPage">

        <!-- <div class="page overflowHidden" style="background: var(--bookReadColor);">
            <div class="fictionName" @click.stop="$router.go(-1)">
                <van-icon name="arrow-left" />
            </div>
            <div class="content" v-if="chapter.fictionChapter" ref="content1">
                <h1 v-if="Book.bookRead.pois == 0">{{ chapter.fictionChapter.chapterName }}</h1>
                <p v-for="(item,index) in Book.bookRead.list[Book.bookRead.pois]" :key="index">
                    {{ item.text }}
                </p>
            </div>
        </div> -->

        <div class="page overflowHidden" style="background: var(--bookReadColor);">
            <div class="fictionName" @click.stop="$router.back(-1);$router.isBack = true">
                <van-icon name="arrow-left" />
                {{ Book.bookRead.poi == 0 ? $route.query.fName : chapter.fictionChapter && 
                chapter.fictionChapter.chapterName }}
            </div>
            <div class="content" v-if="chapter.fictionChapter" ref="content1">
                <h1 v-if="Book.bookRead.poi == 0">{{ chapter.fictionChapter.chapterName }}</h1>
                <p v-for="(item,index) in Book.bookRead.list[Book.bookRead.poi]" :key="index">
                    {{ item.text }}
                </p>
            </div>
            <div>{{ Book.bookRead.poi + 1 }}/{{ Book.bookRead.list.length }}</div>
        </div>

    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    props : ['chapter'],
    data() {
        return {
            poh : 0,
            pow : 0,

            offsetHeight : 0,
            offsetWidth : 0,

            pois : 1,

            page1 : null,
            page2 : null,
            
            middleW : 100,
            middleH : 150,

            textNum : 0,//文字宽度
            textHeight : 32,//文字高度

        }
    },
    computed : {
        ...mapState(['Book'])
    },
    created(){
        this.$on('init', this.init)
    },
    mounted(){

    },
    methods : {

        init(data){

            this.Book.bookRead.list = []

            let self = this

            this.poh = this.$refs.bookPage.offsetHeight
            this.pow = this.$refs.bookPage.offsetWidth

            this.offsetHeight = this.poh - 110
            this.offsetWidth = this.pow - 20

            this.textNum = Math.floor(this.offsetWidth / 20)

            let texts = []
            let text = {
                text : ''
            }
            let i = 0
            let sum = 0
            let offsetHeight = this.offsetHeight
            data.contents.forEach(c => {
                
                for (let index = 0; index < c.length; index++) {

                    if(isPage() && (index + 1 == c.length || i > this.textNum)){
                        if(index != 0){
                            sum += 20
                        }
                        sum = 0
                        texts.push(text)
                        i = 0
                        text = {
                            text : ''
                        }
                        self.Book.bookRead.list.push(texts)
                        texts = []
                    }

                    if (Math.ceil(i) % this.textNum == 0) {
                        sum += 32
                    }


                    if('“”'.indexOf(c[index]) != -1){
                        i += 0.5
                    }else if('1234567890'.indexOf(c[index]) != -1){
                        i += 0.8
                    }else if('，。'.indexOf(c[index]) != -1){
                        i += 1.3
                    }else{
                        i++
                    }
                    
                    text.text += c[index]
                }
                sum += 20
                i = 0
                texts.push(text)
                text = {
                    text : ''
                }
            });

            texts.push(text)
            self.Book.bookRead.list.push(texts)


            this.$emit('afterInit')


            function isPage(){
                return sum > offsetHeight - (self.Book.bookRead.list.length == 0 ? 120 : 0)
            }
        },

        // 页面被点击
        clickPage(e){

            let x = e.clientX
            let y = e.clientY

            if(x < this.middleW || y < this.middleH){
                this.upperPage()
            }else if(this.pow - this.middleW < x || this.poh - this.middleH < y){
                this.nextPage()
            }else{
                this.$emit('clickPage', e)
            }
        },
        // 下一页
        nextPage(){
            if(this.Book.bookRead.poi + 1 != this.Book.bookRead.list.length){
                this.Book.bookRead.poi++
                this.$emit('updateBookPoi')
            }else{
                this.$emit('nextPage')
            }
        },
        // 上一页
        upperPage(){
            if(this.Book.bookRead.poi != 0){
                this.Book.bookRead.poi--
                this.$emit('updateBookPoi')
            }else{
                this.$emit('upperPage')
            }
        },
        // 转场动画
        animation(){

        },
    }
}
</script>

<style scoped>
.bookPage{
    position: relative;
    height: 100%;
    width: 100%;
}
.page{
    position: absolute;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    padding: 10px;
    overflow-y: scroll;
}
.page.overflowHidden .content-o{
    /* overflow: hidden; */
}
.fictionName{
    height: 20px;
    width: 100%;
}
.content{
    position: relative;
    width: 100%;
    padding: 20px 0;
    height: calc(100% - 80px);
}
.content h1{
    height: 40px;
    line-height: 40px;
    padding-bottom: 80px;
}
.content p{
    font-size: 19px;
    line-height: 32px;
    padding: 10px 0;
}
</style>